import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import axios from "axios";
import { NavBar, Tag, Card, IndexBar, List } from "antd-mobile";

function Index() {
  const { type } = useParams();
  const [cityList, setCityList] = useState([]);
  const [hotList, setHotList] = useState([]);

  const FeachGetCity = async () => {
    const res = await axios.get("/api/city");
    setCityList(res.data.data.cityList);
    setHotList(res.data.data.hotCities);
  };

  useEffect(() => {
    FeachGetCity();
  }, []);


  return (
    <div>
      <NavBar onBack={() => navigate("/")}>城市选择</NavBar>
      <div>
       
        <Card title="热门城市">
          {hotList.length > 0 &&
            hotList.map((item, ind) => (
              <Tag
                key={ind}
                style={{ margin: 5 }}
                onClick={() => handelGetCity(item.name)}
              >
                {item.name}
              </Tag>
            ))}
        </Card>
        <Card title="城市列表">
          <div style={{ height: window.innerHeight }}>
            <IndexBar>
              {cityList.length > 0 &&
                cityList.map((item) => {
                  return (
                    <IndexBar.Panel
                      index={item.title}
                      title={`${item.title}`}
                      key={`${item.title}`}
                    >
                      <List>
                        {item.citys.map((item, index) => (
                          <List.Item
                            key={index}
                          >
                            {item.name}
                          </List.Item>
                        ))}
                      </List>
                    </IndexBar.Panel>
                  );
                })}
            </IndexBar>
          </div>
        </Card>
      </div>
    </div>
  );
}

export default Index;
